<template>
	<view>
		<c-layout>
			<c-navigation-bar slot="head" :title="$t('product.HoldingProducts')" titleColor=" #000000"></c-navigation-bar>

			<view class="Completed">
				<view class="Followers">{{$t('product.RevenueDetails') }}</view>
				<view class="type-box">
					<view class="">{{$t('product.name') }}</view>
					<view class="">{{$t('product.EarningCycle') }}</view>
					<view class="">{{$t('product.ReturnRate') }}</view>
					<view class=""> {{$t('product.Investment') }}</view>
					<view class=""> {{$t('product.Earnings') }}</view>
				</view>
				<view class="notProduct" v-if="!lists.length">
					<image src="../../static/images/animal.png" mode=""></image>
					<view class="">{{$t('product.notHold') }}</view>
				</view>
				<scroll-view scroll-y style="height: 85%; width: 100%" @scrolltolower="onreachBottom1" v-if="lists.length">
					<view class="holdProduct" >
						<view class="count-box" v-for="it in lists" :key="it.id">
							<view class="">{{it.name}}</view>
							<view class="">{{it.day}}Day</view>
							<view class="">{{it.interestRate*100}}%</view>
							<view class="">${{it.amount}} </view>
							<view class="">{{it.totalRevenue}} </view>
						</view>
					</view>
				
				</scroll-view>
			</view>
		</c-layout>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 1,
			current: 1,
			lists: []
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		getList() {
			let data = {
				pageSize: 100,
				pageNum: this.current
			};
			this.$u.post('/app/financial/online/detail/onlineUserPage', data).then((res) => {
				const nextDataList = res.data.records; // 假设接口返回数据格式为 { data: [...] }
				if (nextDataList.length > 0) {
					this.lists = this.lists.concat(nextDataList);
					console.log(this.lists);
					this.current++;
				} else {
					
				}
			});
		},
		onreachBottom1(){
			this.getLists()
		},
	}
};
</script>

<style lang="scss" scoped>
/deep/.c-navigation-bar .navbar .center[data-v-11ec4984] uni-text span {
	font-size: 28rpx;

	font-weight: 600;
}
/deep/.uni-scroll-view,
.uni-scroll-view-content {
	height: 98%;
	overflow: auto;
}
.uni-scroll-view {
	margin-bottom: 100rpx;
}
.Completed {
	height: 1050rpx;
	background: #ffffff;
	box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.15);
	border-radius: 26rpx;
	margin: 40rpx;
	.Followers {
		text-align: center;
		font-size: 32rpx;
		font-family: Inter-Medium, Inter;
		font-weight: 500;
		color: #000000;
		padding: 34rpx;
		height: 96rpx;
	}
	.type-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 48rpx;
		background: #333755;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		color: #ffffff;
		font-size: 24rpx;
		margin: 0 12rpx;
		// view:nth-child(4) {
		// 	width: 33%;
		// 	text-align: center;
		// }
		// view:nth-child(1) {
		// 	width: 23%;
		// 	text-align: center;
		// }
		// view:nth-child(2) {
		// 	width: 22%;
		// 	text-align: center;
		// }
		// view:nth-child(3) {
		// 	width: 22%;
		// 	text-align: center;
		// }
		view{
			width: calc(100%/5);
			text-align: center;
	
		}
	}
	.notProduct {
		height: 880rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		image {
			width: 112rpx;
			height: 112rpx;
			margin-bottom: 56rpx;
		}
		view {
			font-size: 32rpx;
			color: #000000;
		}
	}
	.holdProduct {
		height: 880rpx;
		background: rgba(51, 55, 85, 0.14);
		margin: 0 12rpx;
		.count-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx 0;
			margin-bottom: 10rpx 0;
			color: #333755;
			font-size: 24rpx;
			border-bottom: 1px solid rgba(51, 55, 85, 0.32);
			// view:nth-child(1) {
			// 	width: 27%;
			// 	text-align: center;
			// }
			// view:nth-child(2) {
			// 	width: 20%;
			// 	text-align: center;
			// }
			// view:nth-child(3) {
			// 	width: 20%;
			// 	text-align: center;
			// }
			// view:nth-child(4) {
			// 	width: 33%;
			// 	text-align: center;
			// }
			view{
				width: calc(100%/5);
				white-space:pre-wrap;
				        word-wrap : break-word ;
				text-align: center;
			}
		}
	}
}
</style>
